<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  
  
  <title>  写夜子的个人博客 </title>

 
  
    <link rel="icon" href="/images/favicon.png">
  


  <link rel="stylesheet" href="/nayo.min.css"> 
</head>  
  <body>   
    
      <header class="header">
	
  <nav class="header-nav">        
   
    <span class="iconfont icon-menu mobile-toggle"></span>   	

    <div class="header-menu">          
              
            
              <a class="header-menu-link" id="header-menu-home" href="/">首页</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-archives" href="/archives">归档</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-tags" href="/tags">标签</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-about" href="/about">关于</a>     
            
            
            
              <a class="iconfont icon-menu-search header-menu-link" id="header-menu-search"></a>
            
                
    </div>  
    
  </nav>
</header>   

      <div class="container">       
          
          
            <section class="main">  
          

          




<div class="profile sildeUpMin">
	
		<a href="/">
			<img class="avatar" src="http://wx2.sinaimg.cn/mw690/89296167gy1fu5ph67x17j21kw1kwhdu.jpg">
		</a>
		<p class="author">写夜子</p>
		
		<div class="social">
   		      		
			<a target="_blank" class="social-links" href="https://github.com/xieyezi">		
				<i class="iconfont icon-Github"></i>
			</a>	
	          		
			<a target="_blank" class="social-links" href="https://weibo.com/2301190503/profile?rightmod=1&wvr=6&mod=personinfo">		
				<i class="iconfont icon-Weibo"></i>
			</a>	
	          		
			<a target="_blank" class="social-links" href="https://www.facebook.com/profile.php?id=100022240804629">		
				<i class="iconfont icon-Facebook"></i>
			</a>	
	          		
			<a target="_blank" class="social-links" href="https://twitter.com/xieyezi">		
				<i class="iconfont icon-Twitter"></i>
			</a>	
	          		
			<a target="_blank" class="social-links" href="https://www.instagram.com/_xieyezi_/">		
				<i class="iconfont icon-Instagram"></i>
			</a>	
	    
    	</div>		
</div>


    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2019/03/03/解决移动端300ms延迟点击的问题/">解决移动端300ms延迟的问题</a>

		 

		<div class="article-meta">
			<time>3月 03, 2019</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="移动端300ms延迟"><a href="#移动端300ms延迟" class="headerlink" title="移动端300ms延迟"></a>移动端300ms延迟</h3><p>  移动端浏览器click事件为什么会有300ms的延迟呢？因为在手机上有个双击方案：在手机上快速点击两下，实现页面放大；再次双击，恢复到原始比例。<br>  那它是如何实现的呢？浏览器在捕捉到第一次点击事件后，会等待一段时间，如果在这段时间内，用户没有再次进行点击操作的话，就执行单击事件；如果用户进行了第二次点击操作的话，就会执行双击事件。这段等待的时间大约300ms。
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2019/03/03/解决移动端300ms延迟点击的问题/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2019/02/26/Vue-cli3.0+Hbuilder打包App/">Vue cli3+Hubuilder将项目打包为App</a>

		 

		<div class="article-meta">
			<time>2月 26, 2019</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
						<a class="article-tag" href="/tags/Hubuilder/">Hubuilder</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>   现在跨平台的开发越发的火了起来。前端能做到的事情也越来越多，App再也不用完全依靠安卓原生开发了。现在开发app的方式都是内核是前端开发，然后再给项目套一个安卓的外壳，即可实现app的开发。</p>
<h3 id="Vue开发app如何打包？"><a href="#Vue开发app如何打包？" class="headerlink" title="Vue开发app如何打包？"></a>Vue开发app如何打包？</h3><p>   现在最新的脚手架为Vue-cli3,构建出来的项目结构十分明了简单。配置文件只需一个Vue.config.js即可搞定。
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2019/02/26/Vue-cli3.0+Hbuilder打包App/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2019/01/17/我的2018年总结/">我的2018，都做了些什么？</a>

		 

		<div class="article-meta">
			<time>1月 17, 2019</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/感悟/">感悟</a>
				
						<a class="article-tag" href="/tags/总结/">总结</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="说在前面"><a href="#说在前面" class="headerlink" title="说在前面"></a>说在前面</h3><p>   我先自己解释一下，在上次更新博客之后，我长达一个月没有更新自己的博客的原因。我上个月15号去了昆明某军区，作为外援，在军区秘密开发一个月。这一个月以来，每天都在加班，所以根本没有时间更新自己的博客。</p>
<h3 id="为什么选择前端？"><a href="#为什么选择前端？" class="headerlink" title="为什么选择前端？"></a>为什么选择前端？</h3><p>   2018年，应该算是我人生的一个转折点吧。特别是下半年，算是正式走入社会。
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2019/01/17/我的2018年总结/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2019/01/17/better-scroll插件初始化后没有效果？/">better-scroll插件初始化后没有效果?</a>

		 

		<div class="article-meta">
			<time>1月 17, 2019</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="说在前面"><a href="#说在前面" class="headerlink" title="说在前面"></a>说在前面</h3><p>   最近做开发,用到了一个很著名的Vue插件-<a href="https://ustbhuangyi.github.io/better-scroll/#/" target="_blank" rel="noopener">better-scroll</a>.这个插件主要是用来解移动端各种滚动页面的需求.我在项目中想要一个页面的滚动效果,引入了这个插件之后,按照作者的方法进行了初始化,但是仍然无法实现.经过我不断的谷歌,终于找到了解决的办法.下面我来介绍一下这个插件的具体的用法.<br>
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2019/01/17/better-scroll插件初始化后没有效果？/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/12/11/利用githubPage+docsify搭建项目文档/">利用githubPage+docsify搭建项目文档</a>

		 

		<div class="article-meta">
			<time>12月 11, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/Github/">Github</a>
				
						<a class="article-tag" href="/tags/docsify/">docsify</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>  这段时间从上海离职回到重庆了,所以一直没有更新我的博客和GitHub,为自己的自律打负分.我可以说最近事情繁多,但是这也不能成为我懒惰的理由.</p>
<h3 id="需求"><a href="#需求" class="headerlink" title="需求"></a>需求</h3><p>  有时候,我们做了一个项目,我们自己能看懂项目,但是我们需要给他人提供API文档,但是我们又没有多余的服务器和域名,这个时候咋办？那么我们就可以用到GitHubPage+<a href="https://docsify.js.org/#/" target="_blank" rel="noopener">docsify</a>搭建我们的项目文档.
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/12/11/利用githubPage+docsify搭建项目文档/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/11/18/Vue.$nextTick解析/">Vue.$nextTick解析</a>

		 

		<div class="article-meta">
			<time>11月 18, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/vue/">vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h2 id="说在前面"><a href="#说在前面" class="headerlink" title="说在前面"></a>说在前面</h2><p>这篇博文全是干货,内容很长,但是值得收藏！！！</p>
<h3 id="问题背景"><a href="#问题背景" class="headerlink" title="问题背景"></a>问题背景</h3><p>   我最近在做一个自己的音乐Web App,期间遇到不少瓶颈,这次记录一下我困扰了将近一周的问题.我在一个组件内点击了播放按键,将这个点击事件派发到父组件,然后传入ID到player组件内,进行异步请求,获取到该首音乐的播放地址,然后通过vue.$ref去调用audio.play()方法,经过调试发现,在谷歌浏览器、火狐浏览器等都能正常播放,但是唯独苹果旗下的safari播放器不能播放.请看代码:<br>
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/11/18/Vue.$nextTick解析/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/11/15/promise的连续调用问题/">promise连续调用的问题</a>

		 

		<div class="article-meta">
			<time>11月 15, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/vue/">vue</a>
				
						<a class="article-tag" href="/tags/ES6/">ES6</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="问题的背景"><a href="#问题的背景" class="headerlink" title="问题的背景"></a>问题的背景</h3><p>  最近在做自己的项目的时候,遇到了一个问题.我在组件里面监听了一个对象的变化.一旦发生变化.先通过这个对象的ID去进行异步请求.获取到一个属性:URL(播放地址).然后将这个属性绑定到audio的src属性上.然后再去利用this.$refs获取dom调用radio.play方法.<br>
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/11/15/promise的连续调用问题/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/11/06/nginx给tomcat配置反向代理/">nginx给tomcat配置反向代理</a>

		 

		<div class="article-meta">
			<time>11月 06, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="说在前面"><a href="#说在前面" class="headerlink" title="说在前面"></a>说在前面</h3><p>   可以利用nginx作为分发服务器,给tomcat下面的项目做代理.</p>
<h3 id="配置方法"><a href="#配置方法" class="headerlink" title="配置方法"></a>配置方法</h3><p>  在nginx根目录下面的conf文件夹下,打开nginx.conf进行编辑(在http内添加如下内容):<br>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"># 设置tomcat代理</span><br><span class="line"> upstream tomcat &#123;</span><br><span class="line">       server <span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>:<span class="number">8080</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> server &#123;</span><br><span class="line">     listen <span class="number">80</span>;</span><br><span class="line">     server_name www.xieyezi.com;</span><br><span class="line">     location / &#123;</span><br><span class="line">         proxy_set_header        Host $host;</span><br><span class="line">         proxy_set_header        X-Real-IP $remote_addr;</span><br><span class="line">         proxy_pass http:<span class="comment">//tomcat;</span></span><br><span class="line">     &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure></p>
		
	</div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/11/06/nginx给tomcat配置反向代理/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/11/06/nginx解决vue生产环境的跨域问题/">nginx解决vue项目在生产环境的跨域问题</a>

		 

		<div class="article-meta">
			<time>11月 06, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
						<a class="article-tag" href="/tags/Vue/">Vue</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="问题由来"><a href="#问题由来" class="headerlink" title="问题由来"></a>问题由来</h3><p>   我最近做项目,我在前端使用了vue开发,使用vue-cli3搭建项目,在开发的过程中,在开发环境中遇到了跨域的问题,我在vue.config.js配置了proxy,然后解决了问题.但是项目总归要上线,我运行了<code>npm run build</code>之后生成了dist文件夹.由于我的服务器容器是tomcat,所以刚开始我在tomcat的webapps文件夹下面新建了一个项目名vuemusic,然后将dist文件夹下面的所有东西拷贝至webapps下面,然后去conf文件夹配置了server.xml,然后我很开心的打开浏览器,输入地址<code>www.xieyezi.com/vuemusic</code>进行访问,这个时候出现一个问题,请求不到后端数据.<br>
		
	</p></div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/11/06/nginx解决vue生产环境的跨域问题/">阅读更多</a>
	</div>

</article>
     
     	
    	  	
  		
    			

<article class="article">

	<div class="article-header">

		<a class="article-title" href="/2018/10/26/Es6的学习笔记2/">Es6的学习笔记2</a>

		 

		<div class="article-meta">
			<time>10月 26, 2018</time>
			
				<span class="iconfont icon-star"></span>
				
						<a class="article-tag" href="/tags/Es6/">Es6</a>
				
						<a class="article-tag" href="/tags/JS/">JS</a>
				
			
		</div>
	</div>


	


	<div class="article-excerpt">
		
			<h3 id="函数的扩展"><a href="#函数的扩展" class="headerlink" title="函数的扩展"></a>函数的扩展</h3><p>   ES6对函数做了很多扩展.</p>
<h4 id="函数参数的默认值"><a href="#函数参数的默认值" class="headerlink" title="函数参数的默认值"></a>函数参数的默认值</h4><p>   ES6允许为函数的参数设置默认值:<br>   <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">point</span> (<span class="params">x = <span class="number">0</span>, y = <span class="number">0</span></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.x = x;</span><br><span class="line">  <span class="keyword">this</span> y = y;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> point();</span><br><span class="line">p&#123;<span class="attr">x</span>: <span class="comment">// 0 , y:  //0&#125;</span></span><br></pre></td></tr></table></figure></p>
		
	</div>

	<div class="article-bottom">
		<a class="article-readmore" href="/2018/10/26/Es6的学习笔记2/">阅读更多</a>
	</div>

</article>
     
     	



 
   <nav class="paginator">
    
        <a class="prev" href="/page/2/"> 
        <i class="iconfont icon-left"></i>
        上一页
        </a>
    

   <span class="page-number"> Page <strong>3</strong>. </span>

    
        <a class="next" href="/page/4/"> 
        下一页
        <i class="iconfont icon-right"></i>
        </a>
    
  </nav> 

          </section> 
      </div>            
    
    <a id="backTop">
      <span>
        <i class="iconfont icon-backtotop"></i>
      </span>
    </a> 

  
    
    <div class="search-container sildeUpMin">
        <div class="search-header">
            <input type="text" placeholder="输入你想搜索的" id="search-input" class="search-input">  
            <span class="search-cancel iconfont icon-cancel"></span>
        </div>
        <div id="search-result" class="search-result"></div>
    </div>
 
     <div class="mobile-menu">      

      
      <img class="mobile-menu-icon" src="/images/favicon.png">   
      

         
            

            <a class="mobile-menu-link" href="/">首页
            </a>
            
         
            

            <a class="mobile-menu-link" href="/archives">归档
            </a>
            
         
            

            <a class="mobile-menu-link" href="/tags">标签
            </a>
            
         
            

            <a class="mobile-menu-link" href="/about">关于
            </a>
            
         
                          

            <a class="mobile-menu-link mobile-menu-search" href="#">搜索 </a>                 
            
         
      
</div>        
    


<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?636802045446222199ae541e32c8133e"; 
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>





     
    




<footer id="footer">


		<div class="footer-copyright">
		&copy;
		
		2018-
		
		2020

		Xieyezi
		<br>

		Copyright
		<a href="https://github.com/xieyezi" target="_blank">Xieyezi</a>
		</div>

</footer>
   

  

    <script src="/nayo.bundle.js"></script>           
  </body>        
</html>